<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索框 -->
      <div>
        <el-input class="input"></el-input>
        <el-button slot="append" icon="el-icon-search"></el-button>
        <el-button type="info" @click="add">添加数据</el-button>
      </div>

      <Table :cols="cols" :data="list" :total="total" v-model="queryModel">
        <template v-slot:time="{ row: { add_time } }">
          {{ new Date(add_time * 1000).format() }}
        </template>
        <template v-slot:action="{ row }">
          <button
            data-v-67a8d2eb=""
            type="button"
            class="el-button el-button--primary el-button--mini"
          >
            <!----><i class="el-icon-edit"></i
            ><!---->
          </button>
          <button
            data-v-67a8d2eb=""
            type="button"
            class="el-button el-button--danger el-button--mini"
            @click="delent(row)"
          >
            <!----><i class="el-icon-delete"></i
            ><!---->
          </button>
        </template>
      </Table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryModel.pagenum"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
        :page-size="queryModel.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Table from "@/components/Table.vue";
import { goodsLis } from "@/api/api";
import { delentList } from "@/api/goods";
export default {
  components: { Table },
  data() {
    return {
      visible: false,
      total: 0,
      queryModel: {
        query: "",
        pagesize: 10,
        pagenum: 2,
      },
      list: [],
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "商品名称",
          name: "goods_name",
          width: 500,
        },
        {
          title: "商品价格(元)",
          name: "goods_price",
        },
        {
          title: "商品重量",
          name: "goods_weight",
        },
        {
          title: "创建时间",

          slot: "time",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    add(){
      this.$router.push("/add")
    },
    //删除
    async delent(row) {
      try {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await delentList(row.goods_id);
            console.log(res, "1");
            this.getlist();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } catch (error) {}
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryModel.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryModel.pagenum = val;
      this.getlist();
    },
    async getlist() {
      try {
        const res = await goodsLis(this.queryModel);
        console.log(res);
        console.log(this.list);
        this.list = res.data.goods;
        this.total = res.data.total;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
.el-card {
  margin-top: 15px;
}
</style>